<template>
   <div class="detail-bottom-right">
       <div class="tab">
           <div 
           class="tab-item"
           v-for="(item,index) of tab"
           :key="item"
           @click="move(index)"
           >{{item}}</div>
           
           <a href="http://www2.53kf.com/webCompany.php?arg=10133101&style=2&kflist=off&kf=19680502&zdkf_type=3&language=cn&charset=GBK" target="_blank" class="tab-item">预约设计</a>
       </div>
        <div class="container-center">
            <img src="@/assets/product-detail/center.png" alt="">
            <div 
            class="summary"
            v-html="this.summary"
            ></div>
        </div>
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
import $ from 'jquery'
export default {
  name: 'productDetail-bottom',
  components:{
    
  },
  props:{
     
     prodcutName:String,
     summary:String,
  },
  data () {
    return {
       tab:['商品详情','细节配件','品质保障','服务流程']
    }
  },
  watch:{
    prodcutName(){
    //    console.log(this.prodcutName)
       this.getInfo()
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
      
    
  },
  methods:{
       move(index){
           $('html,body').animate({scrollTop:1000*(index+1)+'px'},500)
       }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"

img 
    width 100%
.detail-bottom-left
    width 880px
.tab
    overflow hidden
    width 100%
    background #f2f2f2
.tab-item 
    width 20%
    height 70px
    background #f2f2f2
    text-align center
    color black
    line-height 70px
    font-size 16px
    float left
    cursor pointer
    transition all 0.3s
.tab-item:hover 
    color white 
    background url('~@/assets/product-detail/tab-bg.png') no-repeat center center/cover
.container-center
    margin-top 26px
.summary
    width 750px
    // height 200px
    margin 50px auto 
    // background black
</style>
